<script setup>
import {onMounted, ref} from "vue";
import {doGet} from "../../util/request.js";
import * as echarts from 'echarts';
import {showMessage} from "../../util/message.js";
const loadNoteWayData = () => {
  doGet('/api/clue/noteway',{}).then(resp => {
    if (resp.data.code === 200) {
      console.log(resp.data.data)
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '跟踪方式统计',
          subtext: '跟踪方式数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: resp.data.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    } else {
      showMessage('查询失败，原因：'+resp.data.msg,'error')
    }
  })

}

const loadNoteWayCloumData = () => {
  doGet('/api/user/userAct',{}).then(resp => {
    if (resp.data.code === 200) {
      console.log(resp.data.data)

      const name = [];
      const value = [];


// 使用 for 循环遍历对象数组
      for (let i = 0; i < resp.data.data.length; i++) {
        name.push(resp.data.data[i].name);
        value.push(resp.data.data[i].value);

      }
      console.log(name)
      console.log(value)
      var chartDom = document.getElementById('sss');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: name
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: value,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);

    } else {
      showMessage('查询失败，原因：'+resp.data.msg,'error')
    }
  })
}

onMounted(()=>{
  loadNoteWayData()
  loadNoteWayCloumData()
})
</script>

<template>

  <div id="main" style="width: 500px;height: 450px; margin-top: 150px"></div>
  <div id="sss" style="position: relative; left: 350px ; bottom: 500px; width: 1000px;height: 550px;"></div>
</template>

<style scoped>

</style>